<template>
  <div class="md:flex">
    <Card size="small" :loading="loading" title="可开票金额" class="md:w-1/4 w-full !md:mt-0 !mt-4 !md:mr-4" :canExpan="false">
      <div class="py-4 px-4 flex justify-between">
        <CountTo prefix="$" :startVal="0" :endVal="billStatistics.billCanAmount" :decimals="2" class="text-2xl" />
        <img src="./images/1.png" width="64">
      </div>
    </Card>
    <Card size="small" :loading="loading" title="开票中金额" class="md:w-1/4 w-full !md:mt-0 !mt-4 !md:mr-4" :canExpan="false">
      <div class="py-4 px-4 flex justify-between">
        <CountTo prefix="$" :startVal="0" :endVal="billStatistics.billInAmount" :decimals="2" class="text-2xl" />
        <img src="./images/2.png" width="64">
      </div>
    </Card>
    <Card size="small" :loading="loading" title="已开票金额" class="md:w-1/4 w-full !md:mt-0 !mt-4 !md:mr-4" :canExpan="false">
      <div class="py-4 px-4 flex justify-between">
        <CountTo prefix="$" :startVal="0" :endVal="billStatistics.billAlreadyAmount" :decimals="2" class="text-2xl" />
        <img src="./images/3.png" width="64">
      </div>
    </Card>
    <Card size="small" :loading="loading" title="退款金额(退款中+退款成功)" class="md:w-1/4 w-full !md:mt-0 !mt-4" :canExpan="false">
      <div class="py-4 px-4 flex justify-between">
        <CountTo prefix="$" :startVal="0" :endVal="billStatistics.refundAmount" :decimals="2" class="text-2xl" />
        <img src="./images/4.png" width="64">
      </div>
    </Card>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { CountTo } from "/@/components/CountTo/index";
  import { Card } from "ant-design-vue";
  const loading = ref(false);

  const props = defineProps({
    billStatistics: { type: Object, default: ()=>{} },
  });
</script>
